document.addEventListener('DOMContentLoaded', function() {
    // 图片5的切换
    const img5 = document.querySelector('img[src="./img/5-1.png"]');
    let img5State = 1;
    
    img5.addEventListener('click', function() {
        // 先添加淡出动画
        img5.classList.add('fade-up-hidden');
        
        // 等待动画完成后切换图片并淡入
        setTimeout(() => {
            if (img5State === 1) {
                img5.src = './img/5-2.png';
                img5State = 2;
            } else {
                img5.src = './img/5-1.png';
                img5State = 1;
            }
            
            // 触发重排以确保动画正常播放
            void img5.offsetWidth;
            
            // 添加淡入动画
            img5.classList.remove('fade-up-hidden');
            img5.classList.add('fade-up-show');
        }, 300);
    });

    // 图片7的轮播切换
    const img7 = document.getElementById('img7');
    const carousel7 = img7.nextElementSibling;
    let isCarouselShown = false;

    img7.addEventListener('click', function() {
        // 添加淡出动画
        img7.classList.add('fade-up-hidden');
        
        setTimeout(() => {
            if (!isCarouselShown) {
                // 隐藏原图片，显示轮播容器
                img7.style.display = 'none';
                carousel7.style.display = 'block';
                isCarouselShown = true;
            }
            
            // 触发重排以确保动画正常播放
            void carousel7.offsetWidth;
            
            // 移除淡出动画
            carousel7.classList.remove('fade-up-hidden');
            carousel7.classList.add('fade-up-show');
        }, 300);
    });
}); 